<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Direction-Aware Hover Effect with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Direction-Aware Hover Effect with CSS3 and jQuery" />
<meta name="keywords" content="hover, css3, jquery, effect, direction, aware, depending, thumbnails" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<noscript>
<style>
				.da-thumbs li a div {
					top: 0px;
					left: -100%;
					-webkit-transition: all 0.3s ease;
					-moz-transition: all 0.3s ease-in-out;
					-o-transition: all 0.3s ease-in-out;
					-ms-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;
				}
				.da-thumbs li a:hover div{
					left: 0px;
				}
			</style>
</noscript>
</head>
<body>
<div class="container">
  <!-- Codrops top bar -->
  <div class="codrops-top"> <a href="http://tympanus.net/Tutorials/SlideshowJmpress/"> <strong>&laquo; Previous Demo: </strong>Slideshow with jmpress.js </a> <span class="right"> <a href="http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/"> <strong>Back to the Codrops Article</strong> </a> </span>
    <div class="clr"></div>
  </div>
  <!--/ Codrops top bar -->
  <header> <span>Tips &amp; Tricks</span>
    <h1>Direction-Aware <span>Hover Effect</span></h1>
    <nav class="codrops-demos"> <a href="index.html">Default</a> <a class="current-demo" href="index2.html">Delay</a> <a href="index3.html">Inverse</a> </nav>
    <p>We add a little hover delay so that we don't see the info box slide in immediately.</p>
  </header>
  <section>
    <ul id="da-thumbs" class="da-thumbs">
      <li> <a href="http://www.jq-school.com"> <img src="images/1.jpg" />
        <div><span>Menu by Simon Jensen</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/2.jpg" />
        <div><span>TN Aquarium by Charlie Gann</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/3.jpg" />
        <div><span>Mr. Crabs by John Generalov</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/4.jpg" />
        <div><span>Gallery of Mo 2.Mo logo by Adam Campion</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/5.jpg" />
        <div><span>Ice Cream - nom nom by Eight Hour Day</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/6.jpg" />
        <div><span>My Muse by Zachary Horst</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/7.jpg" />
        <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/8.jpg" />
        <div><span>App Preview by Ryan Deshler</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/9.jpg" />
        <div><span>Cornwall Map by Katharina Maria Zimmermann</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/10.jpg" />
        <div><span>final AD logo by Annette Diana</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/11.jpg" />
        <div><span>Land Those Planes by Lee Ann Marcel</span></div>
        </a> </li>
      <li> <a href="http://www.jq-school.com"> <img src="images/12.jpg" />
        <div><span>Seahorse by Trevor Basset</span></div>
        </a> </li>
    </ul>
  </section>
    <center>
  <div style="font-size:15px; font-weight:bold; text-align:center; line-height:25px; clear:both; position:relative; z-index:1;">网友EMP分享方向意识到jQuery+CSS3悬停效果特效<br />
    JquerySchool网站出品（<a href="http://www.jq-school.com" target="_blank">http://www.jq-school.com</a>）<br />
	原作品出处（<a href="http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/index2.html" target="_blank">http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/index2.html</a>）<br />
    官方网站学习交流QQ群<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=47d9817e9e09f61b288b8ad6d33fb18cbd659ca6773f663918d6e5d3a2981a12"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="Jquery学堂③群" title="Jquery学堂③群"></a> </div>
</center>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script type="text/javascript">
			$(function() {
			
				$('#da-thumbs > li').hoverdir( {
					hoverDelay	: 75
				} );

			});
		</script>
</body>
</html>
